<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <div>
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" v-if="showConditionFlag === true">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :span="5">
                <a-form-model-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierId">
                  <a-select
                    show-search
                    placeholder="请选择供应商"
                    option-filter-prop="children"
                    v-model="model.supplierId"
                    style="width: 100%"
                    :filter-option="filterOptionSupplier"
                    allowClear
                    @change="changeSupplier">
                    <a-select-option :value="item.id" v-for="(item,index) in supplierData" :key="index">
                      {{item.supplierName}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="7">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
                      <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
                    </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 10px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
            selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table
            ref="table"
            size="middle"
            :scroll="scroll"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,type:'checkbox'}"
            class="j-table-force-nowrap">

            <span slot="stock" slot-scope="text,record">
              <span v-if="text < record.quantity" style="color: red">{{text}}</span>
              <span v-else>{{text}}</span>
            </span>
          </a-table>
        </div>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'chooseTransferFormItemModal',
    data() {
      return {
        scroll: {
          y:500
        },
        width: '95%',
        model: {},
        title: '',
        visible: false,
        placement: 'right',
        description: '',
        // 表头
        columns: [
          {
            title: '名称',
            align: 'center',
            dataIndex: 'materialName',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '型号',
            align: 'center',
            dataIndex: 'modelNumber',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '规格',
            align: 'center',
            dataIndex: 'specifications',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '品牌',
            align: 'center',
            dataIndex: 'brand',
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: "center",
          },
          {
            title: '市场价/元',
            align: 'center',
            dataIndex: 'marketPrice',
            customRender: function (text) {
              if (text == '' || text == null) {
                return '-'
              } else {
                return text
              }
            }
          },
          {
            title: '预算价/元',
            align: 'center',
            dataIndex: 'estimatedCost',
            customRender: function (text) {
              if (text == '' || text == null) {
                return '-'
              } else {
                return text
              }
            }
          },
          {
            title: '成本价/元',
            align: 'center',
            dataIndex: 'costPrice',
            customRender: function (text) {
              if (text == '' || text == null) {
                return '-'
              } else {
                return text
              }
            }
          },
          {
            title: '供应商',
            dataIndex: 'supplierName',
            align: "center",
            width: "10%",
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '10%',
                }
              }
            }
          },
          {
            title: '单价',
            dataIndex: 'unitPrice',
            align: 'center',
          },
          {
            title: '数量',
            dataIndex: 'quantity',
            align: 'center',
          },
          {
            title: '金额',
            dataIndex: 'subtotal',
            align: 'center',
          },
          {
            title: '库存',
            dataIndex: 'stock',
            align: 'center',
            scopedSlots: { customRender: 'stock' },
          },
          {
            title: '状态',
            dataIndex: 'status',
            align: "center",
            customRender: (text) => {
              if (text === 1){
                return "已生成采购订单";
              }else if (text === 2){
                return "已生成出库订单";
              }else {
                return "未生成订单";
              }
            }
          },
        ],
        //数据集
        dataSource: [],
        cacheData:[],
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        url: {
          purchaseOrderAddUrl: '/ghProjectTransferFormItem/purchaseOrderAdd',
          outDepositoryAddUrl: '/ghProjectTransferFormItem/outDepositoryAdd',
          querySupplierList: "/ghSupplychainSupplier/allList",
        },
        currentType: 0,
        showConditionFlag: true,
        currentSupplierId: 0,   //当前选中的供应商id
        supplierData: [],
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      }
    },
    created() {
      this.loadSupplierData();
    },
    methods: {
      searchQuery(){
        const newDataSource = [...this.cacheData];
        let arrData = [];
        let currentSupplierId = this.currentSupplierId;
        newDataSource.forEach(function (item) {
          if (item.supplierId == currentSupplierId){
            arrData.push(item)
          }
        })
        this.dataSource = arrData;
      },
      searchReset(){
        this.dataSource = this.cacheData;
        this.currentSupplierId = 0;
        this.model = {};
      },
      handleCancel() {
        this.visible = false
        this.onClearSelected()
      },
      handleOk() {
        const that = this;
        if (this.currentType === 1){
          if (this.currentSupplierId === 0){
            this.$message.warning("请选择供应商")
            return;
          }
        }
        if (this.selectedRows.length === 0){
          this.$message.warning("请至少选择一条数据")
          return;
        }
        let params = {}
        params.transferFormItemVOList = this.selectedRows;
        let url = "";
        if (this.currentType === 1){
          url = this.url.purchaseOrderAddUrl;
        }else if (this.currentType === 2){
          url = this.url.outDepositoryAddUrl;
        }
        this.loading = true;
        postAction(url, params).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      add(dataSource,showConditionFlag) {
        this.dataSource = dataSource;
        this.cacheData = dataSource;
        this.showConditionFlag = showConditionFlag;
        this.visible = true
      },
      onSelectAll(selected, selectedRows, changeRows) {
        console.log('**************' + selected, selectedRows, changeRows)
      },
      onSelect(record, selected, selectedRows) {
      },
      onClearSelected() {
        this.selectedRowKeys = []
        this.selectedRows = []
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        if (this.currentType === 1){
          if (this.currentSupplierId === 0){
            this.$message.warning("请选择供应商")
            return;
          }
        }
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectionRows
      },
      filterOptionSupplier(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeSupplier(value) {
        this.currentSupplierId = value;
        this.searchQuery();
      },
      //加载供应商
      loadSupplierData(){
        getAction(this.url.querySupplierList).then((res) => {
          if (res.success) {
            this.supplierData = res.result.records||res.result;
          }else{
            this.$message.warning(res.message)
          }
        })
      },
    }
  }
</script>

<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>